<template>
  <div style="width: var(--width); background-color: #f8f8f8">
    <!-- 关于我们组件 -->
    <div class="about">
      <myTitle name="关于我们" EngName="ABOUT US"></myTitle>
      <div class="about-content">
        <div class="about-left">
          <div class="top">
            <h3>吉林奥来德光电材料股份有限公司</h3>
            <p>
              吉林奥来德光电材料股份有限公司（股票代码：688378）成立于2005年6月，公司跨上海及长春两地布局，是一家专业从事有机电致发光材料（OLED材料）及新型显示产业核心设备的自主研发、规模生产、销售和服务于一体的高新技术企业。
            </p>
            <router-link to="/about"> MORE <Icon type="ios-arrow-forward" /></router-link>
          </div>
          <ul class="bottom">
           <router-link to="about/about-culture"><li>
              <Icon type="md-bookmarks" style="font-size: 50px" />
              <span>企业文化</span>
            </li>
          </router-link>
          <router-link to="about/about-honor"> 
            <li>
              <Icon type="md-trophy" style="font-size: 50px" />
              <span>荣誉资质</span>
            </li>
          </router-link>
          <router-link to="about/about-develop"> 
            <li>
              <Icon type="logo-buffer" style="font-size: 50px" />
              <span>发展历程</span>
            </li>
          </router-link>
          <router-link to="about/about-staffStyle"> 
            <li>
              <Icon type="md-person" style="font-size: 50px" />
              <span>员工风采</span>
            </li>
            </router-link>
          </ul>
        </div>
        <div class="about-right">
          <img src="../img/home_about.png" width="500" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import myTitle from "@/components/myTitle.vue";
export default {
  components: {
    myTitle,
  },
};
</script>

<style lang="scss" scoped>
.about {
  margin: 0 auto;
  padding: 30px 0 80px;
  width: var(--wrap);
  .about-content {
    display: flex;
    justify-content: space-between;
    .about-left {
      padding-top: 15px;
      .top {
        width: calc(1250px / 2);
        h3 {
          width: 100%;
          text-align: center;
        }
        p {
          text-indent: 2em;
          line-height: 25px;
          color: #333;
        }
        a {
          display: block;
          margin-top: 20px;
          color: var(--color-zdyblue);
        }
      }
      .bottom {
        width: calc(1250px / 2);
        height: 215px;
        display: flex;
        align-items: center;
        justify-content: center;
        li {
          position: relative;
          margin: 0 20px;
          width: 120px;
          height: 120px;
          text-align: center;
          line-height: 120px;
          border: 2px solid var(--color-zdyblue);
          border-radius: 50%;
          transition: .5s;
          &:hover {
            background-color: var(--color-zdyblue);
            color: #f8f8f8;
          }
          span {
            position: absolute;
            top: 28px;
            left: 30px;
          }
        }
      }
    }
  }
}

</style>